<template>
    <div class="admin-user-wrap">
        <div class="form-wrap">
            <div class="form-item">
                <label>微信二维码</label>
                <div class="content jc-fe">
                    <file-upload class="wx-img flex al-c jc-c" v-model="form.qrcodeUrl">
                        <div class="text flex al-c jc-c">点击上传</div>
                    </file-upload>
                </div>
            </div>
            <div class="form-item">
                <label>联系电话</label>
                <div class="content">
                    <input type="tel" placeholder="请输入您的联系电话" v-model="form.phone">
                </div>
            </div>
            <div class="form-item block">
                <label>申请原因</label>
                <div class="content">
                    <textarea rows="5" v-model="form.remark"></textarea>
                </div>
            </div>
            <div class="form-item block">
                <label>证件照片</label>
                <div class="content">
                    <file-upload class="zjz-img" v-model="form.url1">
                        <div class="text">请上传身份证正面照片</div>
                    </file-upload>
                    <file-upload class="zjz-img" v-model="form.url2">
                        <div class="text">请上传身份证背面照片</div>
                    </file-upload>
                </div>
            </div>
            <l-button class="save-btn" block @click="handlerSubmit">提交申请</l-button>
            <br>
        </div>
    </div>
</template>

<script>
    import FileUpload from '@/components/img-file'

    export default {
        name: "AdminIndex",
        data() {
            return {
                form: {
                    url1: '',
                    url2: '',
                    phone: '',
                    qrcodeUrl: '',
                    remark: '',
                }
            }
        },
        computed: {},
        components: {FileUpload},
        created() {
            // this.$notify.success('提交成功')
        },
        methods: {
            async handlerSubmit() {
                const rule = {
                    qrcodeUrl: [{required: true, message: '请上传微信二维码'}],
                    phone: [{required: true, message: '请填写联系电话'}],
                    remark: [{required: true, message: '请填写申请原因'}],
                    url1: [{required: true, message: '请上传身份证正面照片'}],
                    url2: [{required: true, message: '请上传身份证背面照片'}],
                }
                this.$utils.validate(this.form, rule, async (valid, msg) => {
                    if (!valid) {
                        this.$notify({
                            type: 'warning',
                            message: msg
                        })
                        return
                    }
                    try {
                        await this.$api.user.fxs(this.form)
                        this.$notify({
                            type: 'success',
                            message: '提交审核成功，审核结果将会以短信方式发送给您'
                        })
                    } catch (e) {

                    }
                })
            }
        },
    }
</script>

<style lang="scss">
    @import "./style";

    .wx-img {
        position: relative;
        width: 200px;
        height: 200px;
        border: 1px dashed #ccc;
        text-align: center;
        font-size: 26px;
        color: #666;

        .text {
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
        }
        img{
            position: relative;
            z-index: 2;
        }
    }

    .zjz-img {
        flex: 1;
        height: 300px;
        border: 1px dashed #ccc;
        padding: 5px;
        margin-bottom: 20px;

        img {
            position: relative;
            z-index: 2;
            width: 100%;
        }

        .text {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            color: #666;
            font-size: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
</style>
